<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/4</title>
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" @input = 'fn' v-model = 'searchText'>
    <p v-for = '(item,key) in searchRes' :key = key>{{item.username}}--{{item.city}}</p>
</div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            searchText: '',
            searchRes: []
        },
        methods: {

        },
        computed: {
            fn() {
                let self = this;
                let timer = null;
                return function () {
                    clearTimeout(timer);
                    timer = timer = setTimeout(function () {
                        timer = null;
                        // "!!"将表达式进行强制转化为bool值的运算，运算结果为true或者false。
                        // 如果&&左侧表达式的值为真值，则返回右侧表达式的值；否则返回左侧表达式的值
                        !!self.searchText && $.ajax({
                            url:'http://localhost:8080/search',
                            method:'get',
                            dataType:'json',
                            data:{
                                searchText: self.searchText
                            }
                        })
                            .then(data => {
                                console.log(data);
                                self.searchRes = data.data
                            })
                            .catch(error => {
                                console.log(error);
                            });
                    },550)
                }

            },
        },
        watch: {

        }
    })
</script>
</html>
